<template>
    <div class="email-settings">
        <span class="head-title" @click="linkTo">邮箱设置</span>
        <section>
            <p><img alt="管理网络邮箱账号" src="./../../../assets/email/images/email-account.png" />管理网络邮箱账号</p>
            <el-table
                :data="listData"
                border
                max-height="529"
                style="width: 100%">
                <el-table-column
                    label="序号"
                    type="index"
                    align="center"
                    width="60">
                </el-table-column>
                <el-table-column
                    label="电子邮箱地址"
                    align="center"
                    prop="account">
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    width="242">
                    <template slot-scope="scope">
                        <el-button type="text" @click="configRow(scope.row)">配置</el-button>
                        <el-button type="text" @click="deleteRow(scope.row.id)" class="delete-button">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <p style="padding-top: 24px"><img alt="添加/配置网络邮箱" src="./../../../assets/email/images/config-mail.png" />添加/配置网络邮箱</p>
            <el-form :model="configForm" :rules="rules" hide-required-asterisk ref="configForm" label-width="148px" class="config-form">
                <el-form-item label="电子邮箱地址：" prop="address">
                    <el-input v-model="configForm.address" placeholder="请填入正确的邮箱地址"></el-input>
                </el-form-item>
                <el-form-item label="发送服务器(SMTP)：">
                    <el-form-item prop="server" style="display: inline-block; width: 340px;">
                        <el-input v-model="configForm.server"  prop="server"></el-input>
                    </el-form-item>
                    <el-form-item label="端口：" prop="port" style="display: inline-block; margin-left: -67px;">
                        <el-input v-model="configForm.port"  prop="port"></el-input>
                    </el-form-item>
                    <!-- <el-checkbox v-model="configForm.ssl" name="type" style="margin-top: 10px">此服务器要求安全链接（SSL）</el-checkbox> -->
                </el-form-item>
                <el-form-item label="登录账号：" prop="account">
                    <el-input v-model="configForm.account"></el-input>
                </el-form-item>
                <el-form-item label="登录密码：" prop="password">
                    <el-input type="password" v-model="configForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('configForm')">提交</el-button>
                </el-form-item>
            </el-form>
        </section>
    </div>
</template>

<script>
    import {networkMailbox} from './../base/base.js';
    
    export default {
        data() {
            return {
                defaultObj: null, // 默认账号信息
                listData: [], // 邮箱账号信息
                configForm: { // 添加/配置表单
                    address: '',
                    server: '',
                    port: '',
                    account: '',
                    password: '',
                    ssl: false
                },
                rules: {
                    // 表单均为必填项，邮箱格式需要做校验
                    address: [{required: true, type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}],
                    server: [
                        { required: true, message: '请输入发送服务器（SMTP）', trigger: 'blur'}
                    ],
                    port: [
                        // {pattern: this.rules.port.reg, message: this.rules.port.msg, trigger: 'blur'},
                        { required: true, message: '请输入端口', trigger: 'blur'}
                    ],
                    account: [
                        // {pattern: this.rules.account.reg, message: this.rules.account.msg, trigger: 'blur'},
                        { required: true, message: '请输入登录账号', trigger: 'blur'}
                    ],
                    password: [
                        // {pattern: this.rules.pwd.reg, message: this.rules.pwd.msg, trigger: 'blur'},
                        { required: true, message: '请输入登陆密码', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.getList();
        },
        methods: {
            /**
             * 路由跳转
             * @param {String} name 具体页面
             */
            linkTo(name) {
                this.$router.go(-1);
            },
            /**
             * 获取当前网络账号数据
             */
            getList() {
                networkMailbox(this).then(res => {
                    this.listData = res;
                })
            },
            /**
             * 配置网络邮箱
             * @param {Object} obj 当前行数据
             */
            configRow(obj) {
                let success = (res => {
                    this.defaultObj = res.data;
                    this.configForm.address = res.data.account;
                    this.configForm.server = res.data.smtp;
                    this.configForm.port = res.data.port;
                    this.configForm.account = res.data.name;
                    // this.configForm.ssl = res.data.ssl === 1 ? true : false;
                    this.configForm.ssl = false;
                });

                this.$ajax({
                    url: "api/email/configsingle",
                    method: "get",
                    params: {id: obj.id},
                    func: {success: success}
                });
            },
            /**
             * 删除网络邮箱
             * @param {String} 当前行 id
             */
            deleteRow(id) {
                this.$confirm(
                    "确认删除该邮箱吗？删除后不可恢复",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                        customClass: "confirm-them"
                    }
                ).then(() => {
                    let success = (res => {
                        this.$message.success(res.msg);
                        this.defaultObj = null;
                        this.$refs['configForm'].resetFields();
                        this.getList();
                    });

                    this.$ajax({
                        url: "api/email/configsingle",
                        method: "delete",
                        params: {
                            id: id
                        },
                        func: {success: success}
                    });
                }).catch(() => {});
            },
            /**
             * 保存账号信息
             * @param {String} formName 表单标识
             */
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let success = (res => {
                            this.$message.success(res.msg);
                            this.$refs['configForm'].resetFields();
                            this.configForm.ssl = false;
                            this.defaultObj = null;
                            this.getList();
                        });
                        let params = {
                            name: this.configForm.account,
                            smtp: this.configForm.server,
                            ssl: 2,
                            // ssl: this.configForm.ssl === true ? 1 : 2,
                            port: this.configForm.port,
                            account: this.configForm.address,
                            password: this.configForm.password
                        }

                        if (this.defaultObj && this.defaultObj.account === this.configForm.address) {
                            params.id = this.defaultObj.id;

                            this.$ajax({
                                url: "api/email/configsingle",
                                method: "put",
                                data: params,
                                func: {success: success}
                            });
                        } else {
                            this.$ajax({
                                url: "api/email/configsingle",
                                method: "post",
                                data: params,
                                func: {success: success}
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>

<style lang="scss">
    .email-settings {
        position: relative;
        margin: 30px auto;
        width: 1000px;
        height: calc(100% - 60px);
        background: #fff;
        overflow: hidden;

        .head-title {
            display: flex;
            align-items: center;
            padding-left: 60px;
            height: 60px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
        }

        .head-title:before {
            display: inline-block;
            content: "";
            position: absolute;
            top: 25px;
            left: 30px;
            width: 9px;
            height: 9px;
            border-width: 0 0 2px 2px;
            border-color: #888;
            border-style: solid;
            transform: rotateZ(45deg);
        }

        section {
            padding: 45px 60px;
            height: 100%;
            overflow: scroll;
            box-sizing: border-box;

            >p {
                font-size: 14px;

                >img {
                    margin-right: 12px;
                    vertical-align: middle;
                }
            }

            .config-form {
                padding: 23px 0;
            }

            .el-form {
                .el-form-item {
                    .el-input {
                        max-width: 340px;
                    }
                }

                .el-form-item:last-child {
                    // padding-top: 18px;
                    
                    .el-form-item__content {
                        text-align: center;

                        .el-button {
                            padding: 10px 40px;
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
</style>

